<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号设置 - 突袭简历</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/account-settings.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <span class="logo-text">突袭简历</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templates.html">简历模板</a></li>
                    <li><a href="resume-editor.html">简历编辑</a></li>
                    <li><a href="resume-analysis.html">AI分析</a></li>
                    <li><a href="pricing.html">会员服务</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <div class="user-dropdown">
                    <button class="user-dropdown-toggle">
                        <img src="images/avatar-placeholder.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">张三</span>
                        <img src="images/icon-chevron-down.svg" alt="展开" class="dropdown-icon">
                    </button>
                    <div class="user-dropdown-menu">
                        <a href="dashboard.html">个人中心</a>
                        <a href="my-resumes.html">我的简历</a>
                        <a href="account-settings.html" class="active">账号设置</a>
                        <a href="#" class="logout-link">退出登录</a>
                    </div>
                </div>
            </div>
            <button class="mobile-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <div class="dashboard-container">
        <aside class="dashboard-sidebar">
            <div class="user-info">
                <img src="images/avatar-placeholder.jpg" alt="用户头像" class="user-avatar">
                <div class="user-details">
                    <h3 class="user-name">张三</h3>
                    <div class="user-membership">
                        <span class="badge badge-premium">高级会员</span>
                        <span class="membership-expires">剩余 328 天</span>
                    </div>
                </div>
            </div>
            <nav class="dashboard-nav">
                <a href="dashboard.html" class="nav-item">
                    <img src="images/icon-dashboard.svg" alt="">
                    <span>个人中心</span>
                </a>
                <a href="my-resumes.html" class="nav-item">
                    <img src="images/icon-resume.svg" alt="">
                    <span>我的简历</span>
                </a>
                <a href="job-applications.html" class="nav-item">
                    <img src="images/icon-application.svg" alt="">
                    <span>求职申请</span>
                </a>
                <a href="saved-jobs.html" class="nav-item">
                    <img src="images/icon-bookmark.svg" alt="">
                    <span>收藏职位</span>
                </a>
                <a href="account-settings.html" class="nav-item active">
                    <img src="images/icon-settings.svg" alt="">
                    <span>账号设置</span>
                </a>
                <a href="membership.html" class="nav-item">
                    <img src="images/icon-membership.svg" alt="">
                    <span>会员服务</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <a href="help-center.html" class="nav-item">
                    <img src="images/icon-help.svg" alt="">
                    <span>帮助中心</span>
                </a>
                <a href="#" class="nav-item logout-link">
                    <img src="images/icon-logout.svg" alt="">
                    <span>退出登录</span>
                </a>
            </div>
        </aside>

        <main class="dashboard-content">
            <div class="content-header">
                <h1>账号设置</h1>
            </div>

            <div class="settings-container">
                <div class="settings-sidebar">
                    <div class="settings-nav">
                        <a href="#profile" class="settings-nav-item active" data-tab="profile">
                            <img src="images/icon-user.svg" alt="">
                            <span>个人资料</span>
                        </a>
                        <a href="#password" class="settings-nav-item" data-tab="password">
                            <img src="images/icon-lock.svg" alt="">
                            <span>修改密码</span>
                        </a>
                        <a href="#notifications" class="settings-nav-item" data-tab="notifications">
                            <img src="images/icon-bell.svg" alt="">
                            <span>通知设置</span>
                        </a>
                        <a href="#privacy" class="settings-nav-item" data-tab="privacy">
                            <img src="images/icon-shield.svg" alt="">
                            <span>隐私设置</span>
                        </a>
                        <a href="#linked-accounts" class="settings-nav-item" data-tab="linked-accounts">
                            <img src="images/icon-link.svg" alt="">
                            <span>关联账号</span>
                        </a>
                        <a href="#delete-account" class="settings-nav-item" data-tab="delete-account">
                            <img src="images/icon-trash.svg" alt="">
                            <span>注销账号</span>
                        </a>
                    </div>
                </div>

                <div class="settings-content">
                    <div class="settings-panel active" id="profile-panel">
                        <div class="panel-header">
                            <h2>个人资料</h2>
                            <p>更新您的个人信息和联系方式</p>
                        </div>
                        <div class="panel-body">
                            <div class="avatar-upload">
                                <div class="avatar-preview">
                                    <img src="images/avatar-placeholder.jpg" alt="头像预览" id="avatar-preview">
                                </div>
                                <div class="avatar-actions">
                                    <button class="btn btn-sm btn-outline" id="upload-avatar-btn">
                                        <img src="images/icon-upload.svg" alt="">
                                        <span>上传头像</span>
                                    </button>
                                    <button class="btn btn-sm btn-text" id="remove-avatar-btn">
                                        <img src="images/icon-trash.svg" alt="">
                                        <span>移除</span>
                                    </button>
                                </div>
                                <p class="avatar-hint">推荐使用正方形图片，大小不超过 2MB</p>
                            </div>

                            <form class="settings-form" id="profile-form">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="fullname">姓名</label>
                                        <input type="text" id="fullname" class="form-control" value="张三">
                                    </div>
                                    <div class="form-group">
                                        <label for="nickname">昵称</label>
                                        <input type="text" id="nickname" class="form-control" value="小张">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="phone">手机号码</label>
                                        <input type="tel" id="phone" class="form-control" value="13800138000" disabled>
                                        <div class="form-hint">手机号码是您的登录凭证，无法修改</div>
                                    </div>
                                    <div class="form-group">
                                        <label for="email">电子邮箱</label>
                                        <input type="email" id="email" class="form-control" value="zhangsan@example.com">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="gender">性别</label>
                                        <div class="select-wrapper">
                                            <select id="gender" class="form-select">
                                                <option value="male" selected>男</option>
                                                <option value="female">女</option>
                                                <option value="other">其他</option>
                                                <option value="private">不愿透露</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="birth">出生日期</label>
                                        <input type="date" id="birth" class="form-control" value="1990-01-15">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="location">所在城市</label>
                                    <input type="text" id="location" class="form-control" value="北京">
                                </div>
                                <div class="form-group">
                                    <label for="bio">个人简介</label>
                                    <textarea id="bio" class="form-control" rows="4">7年产品经验，专注于企业级SaaS产品设计与开发。主导过多个从0到1的产品，擅长用户研究、需求分析和产品规划。</textarea>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">保存修改</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="settings-panel" id="password-panel">
                        <div class="panel-header">
                            <h2>修改密码</h2>
                            <p>定期更新密码可以提高账号安全性</p>
                        </div>
                        <div class="panel-body">
                            <form class="settings-form" id="password-form">
                                <div class="form-group">
                                    <label for="current-password">当前密码</label>
                                    <div class="password-input">
                                        <input type="password" id="current-password" class="form-control">
                                        <button type="button" class="password-toggle">
                                            <img src="images/icon-eye.svg" alt="显示密码">
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="new-password">新密码</label>
                                    <div class="password-input">
                                        <input type="password" id="new-password" class="form-control">
                                        <button type="button" class="password-toggle">
                                            <img src="images/icon-eye.svg" alt="显示密码">
                                        </button>
                                    </div>
                                    <div class="password-strength">
                                        <div class="strength-meter">
                                            <div class="strength-segment"></div>
                                            <div class="strength-segment"></div>
                                            <div class="strength-segment"></div>
                                            <div class="strength-segment"></div>
                                        </div>
                                        <span class="strength-text">密码强度：中等</span>
                                    </div>
                                    <div class="form-hint">密码长度至少8位，包含字母、数字和特殊字符</div>
                                </div>
                                <div class="form-group">
                                    <label for="confirm-password">确认新密码</label>
                                    <div class="password-input">
                                        <input type="password" id="confirm-password" class="form-control">
                                        <button type="button" class="password-toggle">
                                            <img src="images/icon-eye.svg" alt="显示密码">
                                        </button>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">更新密码</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="settings-panel" id="notifications-panel">
                        <div class="panel-header">
                            <h2>通知设置</h2>
                            <p>管理您接收的通知类型和方式</p>
                        </div>
                        <div class="panel-body">
                            <div class="notification-channels">
                                <h3>通知接收方式</h3>
                                <div class="channel-options">
                                    <div class="channel-option">
                                        <input type="checkbox" id="email-channel" checked>
                                        <label for="email-channel">电子邮件</label>
                                    </div>
                                    <div class="channel-option">
                                        <input type="checkbox" id="sms-channel" checked>
                                        <label for="sms-channel">短信</label>
                                    </div>
                                    <div class="channel-option">
                                        <input type="checkbox" id="wechat-channel" checked>
                                        <label for="wechat-channel">微信</label>
                                    </div>
                                    <div class="channel-option">
                                        <input type="checkbox" id="app-channel" checked>
                                        <label for="app-channel">应用内通知</label>
                                    </div>
                                </div>
                            </div>

                            <div class="notification-types">
                                <h3>通知类型</h3>
                                <div class="notification-item">
                                    <div class="notification-info">
                                        <h4>账号安全</h4>
                                        <p>登录提醒、密码修改、账号异常等安全相关通知</p>
                                    </div>
                                    <div class="notification-toggles">
                                        <div class="toggle-group">
                                            <span class="toggle-label">邮件</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">短信</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">应用内</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="notification-item">
                                    <div class="notification-info">
                                        <h4>简历活动</h4>
                                        <p>简历被查看、下载、评论等活动通知</p>
                                    </div>
                                    <div class="notification-toggles">
                                        <div class="toggle-group">
                                            <span class="toggle-label">邮件</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">短信</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox">
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">应用内</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="notification-item">
                                    <div class="notification-info">
                                        <h4>求职进展</h4>
                                        <p>职位申请状态更新、面试邀请等通知</p>
                                    </div>
                                    <div class="notification-toggles">
                                        <div class="toggle-group">
                                            <span class="toggle-label">邮件</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">短信</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">应用内</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="notification-item">
                                    <div class="notification-info">
                                        <h4>会员与订阅</h4>
                                        <p>会员到期提醒、续费通知、优惠活动等</p>
                                    </div>
                                    <div class="notification-toggles">
                                        <div class="toggle-group">
                                            <span class="toggle-label">邮件</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">短信</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">应用内</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="notification-item">
                                    <div class="notification-info">
                                        <h4>营销信息</h4>
                                        <p>新功能介绍、使用技巧、促销活动等营销内容</p>
                                    </div>
                                    <div class="notification-toggles">
                                        <div class="toggle-group">
                                            <span class="toggle-label">邮件</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox">
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">短信</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox">
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-group">
                                            <span class="toggle-label">应用内</span>
                                            <label class="toggle-switch">
                                                <input type="checkbox" checked>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="button" class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                    </div>

                    <div class="settings-panel" id="privacy-panel">
                        <div class="panel-header">
                            <h2>隐私设置</h2>
                            <p>管理您的个人数据和隐私偏好</p>
                        </div>
                        <div class="panel-body">
                            <div class="privacy-section">
                                <h3>简历隐私</h3>
                                <div class="privacy-option">
                                    <div class="option-info">
                                        <h4>简历可见性</h4>
                                        <p>控制您的简历对招聘者的可见性</p>
                                    </div>
                                    <div class="select-wrapper">
                                        <select class="form-select">
                                            <option value="public">公开 - 所有招聘者可见</option>
                                            <option value="limited" selected>限制 - 仅申请的职位可见</option>
                                            <option value="private">私密 - 仅自己可见</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="privacy-option">
                                    <div class="option-info">
                                        <h4>联系方式保护</h4>
                                        <p>控制您的联系方式在简历中的显示方式</p>
                                    </div>
                                    <div class="select-wrapper">
                                        <select class="form-select">
                                            <option value="show">完全显示</option>
                                            <option value="partial" selected>部分隐藏 (如显示部分手机号)</option>
                                            <option value="hide">完全隐藏</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="privacy-section">
                                <h3>个人资料隐私</h3>
                                <div class="privacy-option checkbox-option">
                                    <div class="option-info">
                                        <h4>个人资料可见性</h4>
                                        <p>控制您的个人资料对其他用户的可见性</p>
                                    </div>
                                    <div class="checkbox-group">
                                        <input type="checkbox" id="show-name" checked>
                                        <label for="show-name">显示姓名</label>
                                    </div>
                                </div>
                                <div class="privacy-option checkbox-option">
                                    <div class="option-info">
                                        <h4>活动记录</h4>
                                        <p>控制您的活动是否被记录用于个性化推荐</p>
                                    </div>
                                    <div class="checkbox-group">
                                        <input type="checkbox" id="track-activity" checked>
                                        <label for="track-activity">允许记录活动</label>
                                    </div>
                                </div>
                            </div>

                            <div class="privacy-section">
                                <h3>数据使用</h3>
                                <div class="privacy-option checkbox-option">
                                    <div class="option-info">
                                        <h4>个性化体验</h4>
                                        <p>允许我们使用您的数据提供个性化的内容和推荐</p>
                                    </div>
                                    <div class="checkbox-group">
                                        <input type="checkbox" id="personalization" checked>
                                        <label for="personalization">启用个性化</label>
                                    </div>
                                </div>
                                <div class="privacy-option checkbox-option">
                                    <div class="option-info">
                                        <h4>数据分析</h4>
                                        <p>允许我们分析您的使用数据以改进服务</p>
                                    </div>
                                    <div class="checkbox-group">
                                        <input type="checkbox" id="data-analytics" checked>
                                        <label for="data-analytics">允许数据分析</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="button" class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                    </div>

                    <div class="settings-panel" id="linked-accounts-panel">
                        <div class="panel-header">
                            <h2>关联账号</h2>
                            <p>管理与第三方平台的账号关联</p>
                        </div>
                        <div class="panel-body">
                            <div class="linked-accounts-list">
                                <div class="linked-account-item">
                                    <div class="account-info">
                                        <img src="images/icon-wechat.svg" alt="微信" class="account-icon">
                                        <div class="account-details">
                                            <h4>微信</h4>
                                            <p class="account-status connected">已关联 · 微信昵称</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline">解除关联</button>
                                </div>

                                <div class="linked-account-item">
                                    <div class="account-info">
                                        <img src="images/icon-qq.svg" alt="QQ" class="account-icon">
                                        <div class="account-details">
                                            <h4>QQ</h4>
                                            <p class="account-status not-connected">未关联</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline">关联账号</button>
                                </div>

                                <div class="linked-account-item">
                                    <div class="account-info">
                                        <img src="images/icon-weibo.svg" alt="微博" class="account-icon">
                                        <div class="account-details">
                                            <h4>微博</h4>
                                            <p class="account-status not-connected">未关联</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline">关联账号</button>
                                </div>

                                <div class="linked-account-item">
                                    <div class="account-info">
                                        <img src="images/icon-linkedin.svg" alt="领英" class="account-icon">
                                        <div class="account-details">
                                            <h4>领英</h4>
                                            <p class="account-status not-connected">未关联</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline">关联账号</button>
                                </div>
                            </div>

                            <div class="linked-accounts-benefits">
                                <h3>关联账号的好处</h3>
                                <ul class="benefits-list">
                                    <li>使用第三方账号快速登录</li>
                                    <li>导入第三方平台的个人信息和简历数据</li>
                                    <li>一键分享简历到社交平台</li>
                                    <li>获取更精准的职位推荐</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="settings-panel" id="delete-account-panel">
                        <div class="panel-header">
                            <h2>注销账号</h2>
                            <p>永久删除您的账号和所有相关数据</p>
                        </div>
                        <div class="panel-body">
                            <div class="warning-box">
                                <div class="warning-icon">
                                    <img src="images/icon-warning.svg" alt="警告">
                                </div>
                                <div class="warning-content">
                                    <h3>注销账号是不可逆操作</h3>
                                    <p>注销后，您的账号和所有相关数据将被永久删除，无法恢复。请在操作前确认您已备份所需的数据。</p>
                                </div>
                            </div>

                            <div class="delete-consequences">
                                <h3>注销后将发生什么？</h3>
                                <ul class="consequences-list">
                                    <li>您的个人资料和账号信息将被永久删除</li>
                                    <li>您创建的所有简历将被永久删除</li>
                                    <li>您的求职申请记录将被删除</li>
                                    <li>您的会员资格将被取消，且不予退款</li>
                                    <li>您将无法再使用此手机号码注册新账号</li>
                                </ul>
                            </div>

                            <div class="delete-confirmation">
                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="confirm-delete">
                                    <label for="confirm-delete">我已了解注销账号的后果，并确认要永久删除我的账号</label>
                                </div>
                                <div class="form-group">
                                    <label for="delete-reason">请告诉我们您注销账号的原因（可选）</label>
                                    <div class="select-wrapper">
                                        <select id="delete-reason" class="form-select">
                                            <option value="">请选择原因</option>
                                            <option value="not-useful">不再需要使用此服务</option>
                                            <option value="found-better">找到了更好的替代服务</option>
                                            <option value="too-expensive">价格太贵</option>
                                            <option value="privacy">隐私顾虑</option>
                                            <option value="bad-experience">使用体验不佳</option>
                                            <option value="other">其他原因</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="delete-feedback">更多反馈（可选）</label>
                                    <textarea id="delete-feedback" class="form-control" rows="3" placeholder="请告诉我们您的想法，帮助我们改进服务"></textarea>
                                </div>
                                <div class="form-actions">
                                    <button type="button" class="btn btn-danger" id="delete-account-btn" disabled>注销我的账号</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/main.js"></script>
    <script src="js/account-settings.js"></script>
</body>
</html>